$fzMin:6;
$fzMax:60;

$spaceMax:200;

// 字体大小
@for $i from $fzMin through $fzMax {  
    .fz#{$i}{
			font-size:#{$i}rpx 
		};  
}


// 内外边距，历遍1-$spaceMax
@for $i from 0 through $spaceMax {
	// 只要双数和能被5除尽的数
	@if $i % 2 == 0 or $i % 5 == 0 {
		// 得出：u-margin-30或者u-m-30
		.margin-#{$i}, .m-#{$i} {
			margin: $i + rpx!important;
		}
		
		// 得出：padding-30或者p-30
		.padding-#{$i}, .p-#{$i} {
			padding: $i + rpx!important;
		}
		
		@each $short, $long in l left, t top, r right, b bottom {
			// 缩写版，结果如： m-l-30
			// 定义外边距
			.m#{$short}-#{$i} {
				margin-#{$long}: $i + rpx!important;
			}
			
			// 定义内边距
			.p-#{$short}-#{$i} {
				padding-#{$long}: $i + rpx!important;
			}
			
			// 完整版，结果如：margin-left-30
			// 定义外边距
			.margin-#{$long}-#{$i} {
				margin-#{$long}: $i + rpx!important;
			}
			
			// 定义内边距
			.padding-#{$long}-#{$i} {
				padding-#{$long}: $i + rpx!important;
			}
		}
	}
}

//样式重置
view,text {
	box-sizing: border-box;
}

.fw-b {
	font-weight: bold;
}

// 布局类

.df {
	display: flex;
}
.fsb {
	display: flex;
	justify-content: space-between;
}
.df-ac {
	display: flex;
	align-items: center;
}
.df-cc {
	display: flex;
	align-items: center;
	justify-content: center;
}
.wrap {
	flex-wrap: wrap;
}
.column {
	flex-direction: column;
}
.f1 {
	flex:1
}
.f5 {
	flex:0 0 50%;
}

.pr {
	position: relative;
}
.pa {
	position: absolute;
}
.pos-c {
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}
.posx-c {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.posy-c {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

// 对齐
.tac {
	text-align: center;
}
.tal {
	text-align: left;
}
.tar {
	text-align: right;
}

// 字体色
.c-000 {
	color: #000;
}
.c-333 {
	color: #333;
	
}
.c-999 {
	color: #999;
}
.c-666 {
	color: #666;
}
.c-fff {
	color: #fff;
}
.c-28 {
	color: #282A32;
}
.c-ae {
	color: #AEB0B6;
}
.c-72 {
	color: #727C8E;
}
.c-fe{
	color: #FE5634;
}
.c-57 {
	color: #573BD1;
}

// 背景色

.bg-f {
	background-color: #fff;
}
.bg-f5 {
	background-color: #f5f5f5;
}

.c-28 {
	color: #282A32;
}
.c-bc {
	color: #BCC0C8;
}
.gray{
	color:#999
}
.page {
	background-color: #fff;
	width: 100vw;
	height:100vh;
	padding-top: 150rpx;
	.b-header {
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 999;
		background-color: #fff;
	}
	.b-content {
		height: calc(100vh - 192rpx);
		overflow-y: auto;
		position: relative;
		&.hasFooter {
			padding-bottom: 120rpx;
		}
		.b-footer {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
		}
	}
	
	// padding-top: 120rpx;
	// position: relative;
	// .header {
	// 	position: absolute;
	// 	top: 0;
	// 	left: 0;
	// 	width:100%;
	// 	padding-top: 50rpx;
	// }
	// padding: 0 20rpx;
}
.bs {
	box-shadow: 0px 7rpx 29rpx -5rpx rgba(114,124,142,0.11); 
}

// 加减
.num-add {
		position: absolute;
		right: 0;
		bottom: 0;
		.num-op {
			width: 60rpx;
			height: 60rpx;
			background-color: #F5F5F5;
			font-size: 30rpx;
			text-align: center;
			line-height: 60rpx;
			color: #999;
		}
		input {
			width: 80rpx;
			color: #000;
		}
	}
	
	
	.form-item {
		border-bottom: 1px solid rgba(114,124,142,0.11);
		margin-bottom: 50rpx;
		&:last-child {
			border-bottom: none;
		}
		.label {
			color: #999999;
			font-size: 22rpx;
			margin-bottom: 30rpx;
		}
		input {
			padding: 10rpx 0;
			font-size: 24rpx;
		}
		textarea {
			border: 1px solid rgba(114,124,142,0.11);
			font-size: 24rpx;
			background-color: rgba(235,235,235,.2);
			padding: 20rpx;
			border-radius: 4rpx;
		}
		
	}
.text-center {
	text-align: center;
}
.margin {
	margin: 30upx;
}
.text-grey,
.line-grey,
.lines-grey {
	color: #8799a3;
}
.text-small{ font-size:12px; }
.text-size-14{ font-size:14px; }
.text-size-16{ font-size:16px; }
.bottom_line{ border-bottom: 1px solid rgba(114,124,142,0.11); }